 <template>
  <div>
    <div class="warnig_cont">
      <div class="warnig_cont_top">
        <div class="warnig_cont_top_left">
              <div>
                   <el-input
                      placeholder="请输入漏检1数值"
                      v-model="loss1"
                      size="mini"
                      clearable>
                  </el-input>
              </div>   
               <div>
                   <el-input
                      placeholder="请输入漏检2数值"
                      v-model="loss2"
                      size="mini"
                      clearable>
                  </el-input>
              </div>   
               <div>
                   <el-input
                      placeholder="请输入漏检3数值"
                      v-model="loss3"
                      size="mini"
                      clearable>
                  </el-input>
              </div>   
              <div>
                   <el-input
                      placeholder="请输入直通率数值"
                      v-model="firstPassyield"
                      size="mini"
                      clearable>
                  </el-input>
              </div>   
        </div>
        <div class="warnig_cont_top_right">
          <div></div>
          <div class="Fullction"><Fullction></Fullction></div>
          <div class="el-icon-s-home conthome"></div>
        </div>
      </div>

      <div class="warning_hader">
        <div class="warning_hader_dipyan">
          <div class="box_item" v-for="(item, index) in this.ony" :key="index">
            <div class="box_item_chredn hover_chuden">
              <div class="box_item_chredn_title">AFI {{ item.line }}</div>
              <div v-if="item.mis1 > loss1" class="check" style="color: red">
                漏检1: {{ item.mis1 }}%
              </div>
              <div class="check" v-else style="color: #ffffff">漏检1:  {{ item.mis1 }}%</div>

              <div class="check" v-if="item.mis2 >loss2" style="color: red; font-weight: 700">
                漏检2:  {{ item.mis2 }}%
              </div>
              <div class="check" v-else style="color: #ffffff; font-weight: 700">
                漏检2:  {{ item.mis2 }}%
              </div>

              <div class="check"  v-if="item.mis3 >loss3" style="color: red; font-weight: 700">
                漏检3:   {{ item.mis3 }}%
              </div>
              <div class="check" v-else style="color: #ffffff">漏检3:   {{ item.mis3 }}%</div>

              <div  class="check"> 过检:     {{ item.over }}%</div>

              <div class="check"  style="color: red; font-weight: 700"   v-if="item.yield < firstPassyield">直通率:   {{ item.yield }}%</div>
               <div class="check" v-else style="color: #ffffff">直通率:   {{ item.yield }}%</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Fullction from "../../../components/fullscreen/Fullscreen";
export default {
  components: {
    Fullction,
  },
  data() {
    return {
      items: {
        mis1: [
          { line: "01", val: "0.3%" },
          { line: "02", val: "1.57%" },
          { line: "03", val: "32.7%" },
          { line: "04", val: "16.57%" },
          { line: "05", val: "12.7%" },
          { line: "06", val: "16.57%" },
          { line: "07", val: "32.7%" },
          { line: "08", val: "16.57%" },
          { line: "09", val: "12.7%" },
        ],
        mis2: [
          { line: "01", val: "63.3%" },
          { line: "02", val: "16.57%" },
          { line: "03", val: "32.7%" },
          { line: "04", val: "16.57%" },
          { line: "05", val: "12.7%" },
          { line: "06", val: "16.57%" },
          { line: "07", val: "32.7%" },
          { line: "08", val: "16.57%" },
          { line: "09", val: "12.7%" },
        ],
        mis3: [
          { line: "01", val: "63.3%" },
          { line: "02", val: "16.57%" },
          { line: "03", val: "32.7%" },
          { line: "04", val: "16.57%" },
          { line: "05", val: "12.7%" },
          { line: "06", val: "16.57%" },
          { line: "07", val: "0.7%" },
          { line: "08", val: "16.57%" },
          { line: "09", val: "12.7%" },
        ],
        over: [
          { line: "01", val: "3.3%" },
          { line: "02", val: "16.57%" },
          { line: "03", val: "32.7%" },
          { line: "04", val: "16.57%" },
          { line: "05", val: "12.7%" },
          { line: "06", val: "16.57%" },
          { line: "07", val: "32.7%" },
          { line: "08", val: "16.57%" },
          { line: "09", val: ".7%" },
        ],
        yield: [
          { line: "01", val: "63.3%" },
          { line: "02", val: "16.57%" },
          { line: "03", val: "32.7%" },
          { line: "04", val: "16.57%" },
          { line: "05", val: "12.7%" },
          { line: "06", val: "16.57%" },
          { line: "07", val: "32.7%" },
          { line: "08", val: "16.57%" },
          { line: "09", val: "1.7%" },
        ],
      },

      onylist: {
        mis1: [
          { line: "01", val: "0.3%" },
          { line: "02", val: "0.57%" },
          { line: "03", val: "0.7%" },
          { line: "04", val: "0.57%" },
          { line: "05", val: "0.7%" },
          { line: "06", val: "0.57%" },
          { line: "07", val: "0.7%" },
          { line: "08", val: "6.57%" },
          { line: "09", val: "2.7%" },
        ],
        mis2: [
          { line: "01", val: "3.3%" },
          { line: "02", val: "6.57%" },
          { line: "03", val: "2.7%" },
          { line: "04", val: "6.57%" },
          { line: "05", val: "1.7%" },
          { line: "06", val: "1.57%" },
          { line: "07", val: "2.7%" },
          { line: "08", val: "1.57%" },
          { line: "09", val: "2.7%" },
        ],
        mis3: [
          { line: "01", val: "63.3%" },
          { line: "02", val: "16.57%" },
          { line: "03", val: "32.7%" },
          { line: "04", val: "16.57%" },
          { line: "05", val: "12.7%" },
          { line: "06", val: "16.57%" },
          { line: "07", val: "0.7%" },
          { line: "08", val: "16.57%" },
          { line: "09", val: "12.7%" },
        ],
        over: [
          { line: "01", val: "3.3%" },
          { line: "02", val: "6.57%" },
          { line: "03", val: "2.7%" },
          { line: "04", val: "6.57%" },
          { line: "05", val: "1.7%" },
          { line: "06", val: "1.57%" },
          { line: "07", val: "2.7%" },
          { line: "08", val: "6.57%" },
          { line: "09", val: "12.7%" },
        ],
        yield: [
          { line: "01", val: "63.3%" },
          { line: "02", val: "16.57%" },
          { line: "03", val: "32.7%" },
          { line: "04", val: "16.57%" },
          { line: "05", val: "12.7%" },
          { line: "06", val: "16.57%" },
          { line: "07", val: "32.7%" },
          { line: "08", val: "16.57%" },
          { line: "09", val: "12.7%" },
        ],
      },
      obje: {},
      obje2: {},
      obje3: {},
      obje4: {},
      obje5: {},
      list5: [],
      list: [],
      list2: [],
      list3: [],
      list4: [],
      color: "",
      ony: [],
      loss1:'',
      loss2:'',
      loss3:'',
      firstPassyield:''
    };
  },
  mounted() {
    this.onclick();

    this.setTimeHandie();
  },
  methods: {

    //  keydowond(){
    //     console.log(this.loss1)
    //     console.log(this.loss2)
    //     console.log(this.loss3)
    //  },



    onclick() {
      this.ajax.get("func/1032/getAlarmData").then((res) => {
        if (res.status == 200) {
          console.log(res.data);
          this.items = res.data;
          this.DataCount();
        }
      });
    },

    setTimeHandie() {
      setInterval(() => {
        this.ajax.get("func/1032/getAlarmData").then((res) => {
          if (res.status == 200) {
            console.log("数据定时更新",res.data);
            this.items = res.data;
            this.DataCount();
          }
        });
      }, 300000);
    },

    DataCount() {
      this.list = [];
      this.list2 = [];
      this.list3 = [];
      this.list4 = [];
      this.list5 = [];
      this.items.mis1.forEach((element) => {
        this.obje = {
          line: element.line,
          mis1: element.val,
        };
        this.list.push(this.obje);
      });
      for (let i = 0; i < this.items.mis2.length; i++) {
        this.obje2 = {
          mis2: this.items.mis2[i].val,
        };
        this.list2.push(this.obje2);
      }
      for (let i = 0; i < this.items.mis3.length; i++) {
        this.obje3 = {
          mis3: this.items.mis3[i].val,
        };
        this.list3.push(this.obje3);
      }

      for (let i = 0; i < this.items.over.length; i++) {
        this.obje4 = {
          over: this.items.over[i].val,
        };
        this.list4.push(this.obje4);
      }

      for (let i = 0; i < this.items.yield.length; i++) {
        this.obje5 = {
          yield: this.items.yield[i].val,
        };
        this.list5.push(this.obje5);
      }

      this.ony = this.list.map((item, index) => {
        return {
          ...item,
          ...this.list2[index],
          ...this.list3[index],
          ...this.list4[index],
          ...this.list5[index],
        };
      });

      for (let i = 0; i < this.ony.length; i++) {
        this.ony[i].mis1 = this.ony[i].mis1.substr(
          0,
          this.ony[i].mis1.length - 1
        );
        this.ony[i].mis2 = this.ony[i].mis2.substr(
          0,
          this.ony[i].mis2.length - 1
        );
        this.ony[i].mis3 = this.ony[i].mis3.substr(
          0,
          this.ony[i].mis3.length - 1
        );
        this.ony[i].over = this.ony[i].over.substr(
          0,
          this.ony[i].over.length - 1
        );
         this.ony[i].yield = this.ony[i].yield.substr(
          0,
          this.ony[i].yield.length - 1
        );
      }
        this.ony.forEach((ele)=>{
          ele.mis1 = Number(ele.mis1)
          ele.mis2 = Number(ele.mis2)
          ele.mis3 = Number(ele.mis3)
          ele.over = Number(ele.over)
          ele.yield = Number(ele.yield)
        })
      // console.log(this.ony);

    },
  },
};
</script>

<style scoped>
.warnig_cont {
  width: 100%;
  background: rgb(241, 238, 238);
}
.warnig_cont_top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  box-shadow: 0px 0px 0px 0.5px gainsboro;
}
.warnig_cont_top_left {
  width: 60%;
  /* border:1px solid #000; */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.warnig_cont_top_right {
  width: 30%;
  display: flex;
  justify-content: space-between;
}
.conthome {
  font-size: 40px;
}

.Fullction {
  margin-left: 75%;
}
.warning_hader {
  width: 100%;
  height: 91.5%;
  position: absolute;
  margin-top: 10px;
  background: url("./source/a.jpg") no-repeat;
  background-size: 100% 100%;
}
.warning_hader_dipyan {
  width: 95%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.box_item {
  width: 26%;
  margin-top: 10px;
}
.box_item_chredn {
  width: 60%;
  height: 28.5vh;
  border-radius: 70%;
  margin: 0 auto;
  background: #996699;
  opacity: 0.9;
  text-align: center;
  box-shadow: 0px 0px 1px 3px;
}
.box_item_chredn_title {
  line-height: 40px;
  font-size: 25px;
  font-weight: 700;
  color: #ffffff;
}
.loss_a {
  font-size: 25px;
  margin-top: 5px;
  font-weight: 700;
  color: #ffffff;
}
.check {
  margin-top: 5px;
  color: #ffffff;
}
.hover_chuden:hover
{
    -webkit-box-shadow: 0 0 30px rgba(0,0,0,0.1);
    transition: all 0.2s ease-in;
    box-shadow: 0 0  10px rgba(216, 211, 211, 0.782);
    -webkit-transform: translate3d(0, 0px, -2px);
    transform: translate3d(0, 1px, -2px);    
}

@media screen and (min-width: 1920px) {
  .check {
    margin-top: 17px;
    color: #ffffff;
  }
  .box_item {
    width: 30%;
    margin-top: 10px;
  } 
}
</style>